<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>用户列表</title>
		<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
		<script src="js/vue.js"></script>
		<script src="element-ui/lib/index.js"></script>
		<script src="js/axios-0.18.0.js"></script>
		<script src="js/server.js"></script>
	</head>
	<body>
		<div id="div">
			<!--
			用户列表：
				用户列表数据不能删除
				可以针对用户状态进行启用和冻结
				管理员只能查看用户信息，不能修改
			-->
			
			<!-- 查询 -->
			<el-form :inline="true" :model="searchFrom" class="demo-form-inline">
				<el-form-item label="用户编码">
					<el-input v-model="searchFrom.userCode" ></el-input>
				</el-form-item>
				<el-form-item label="用户名称">
					<el-input  v-model="searchFrom.userName"></el-input>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="doSearch">查询</el-button>
				</el-form-item>
			</el-form>

			<!-- 表格列表 -->
			<template>
				<el-table :data="tableData" style="width: 100%">
					<el-table-column type="index" label="序号" width="50"></el-table-column>
					<el-table-column prop="userCode" label="用户编码">
					</el-table-column>
					<el-table-column prop="userName" label="用户名称">
					</el-table-column>
					<!-- 对于状态的值需要进行二次处理 -->
					<el-table-column prop="status" label="状态" :formatter="formatterStatus">
					</el-table-column>
					<el-table-column prop="phone" label="手机号">
					</el-table-column>
					<el-table-column prop="role.roleName" label="用户角色">
					</el-table-column>
					<el-table-column prop="creationDate" label="创建时间">
					</el-table-column>
					<el-table-column label="操作" width="220">
						<template slot-scope="scope">
							<el-button size="mini" @click="handleShow(scope.$index, scope.row)">查看</el-button>
							<el-button size="mini" type="success" v-if="scope.row.status==2" v-on:click="doUpdateStatus(scope.row.id,1)" >启用</el-button>
							<el-button size="mini" type="danger" v-else  v-on:click="doUpdateStatus(scope.row.id,2)">冻结</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>

			<!-- 分页条 -->
			<div class="block">
				<el-pagination 
					@size-change="handleSizeChange" 
					@current-change="handleCurrentChange"
					:current-page="pagination.currentPage"
					:page-sizes="[3, 5, 10]"
					:page-size="pagination.pageSize"
					layout="total, sizes, prev, pager, next, jumper" 
					:total="pagination.total">
				</el-pagination>
			</div>


			<!-- 查看 -->
			<el-dialog title="查看用户信息" :visible.sync="showFormVisible">
			  <el-form :model="showForm">
					<el-form-item label="用户编码" :label-width="formLabelWidth">
					  <el-input  autocomplete="off" disabled v-model="showForm.userCode"></el-input>
					</el-form-item>
					<el-form-item label="用户名称" :label-width="formLabelWidth">
					  <el-input  autocomplete="off" disabled v-model="showForm.userName"></el-input>
					</el-form-item>
					<el-form-item label="状态" :label-width="formLabelWidth">
					  <el-input autocomplete="off" disabled v-model="showForm.status"></el-input>
					</el-form-item>
					<el-form-item label="性别" :label-width="formLabelWidth">
					  <el-input autocomplete="off"  disabled v-model="showForm.gender"></el-input>
					</el-form-item>
					<el-form-item label="出生日期" :label-width="formLabelWidth">
					  <el-input autocomplete="off" disabled v-model="showForm.birthday"></el-input>
					</el-form-item>
					<el-form-item label="手机" :label-width="formLabelWidth">
					  <el-input autocomplete="off" disabled v-model="showForm.phone"></el-input>
					</el-form-item>
					<el-form-item label="地址" :label-width="formLabelWidth">
					  <el-input  autocomplete="off" disabled v-model="showForm.address"></el-input>
					</el-form-item>
					<el-form-item label="用户角色" :label-width="formLabelWidth">
					  <el-input  autocomplete="off" disabled v-model="showForm.roleName"></el-input>
					</el-form-item>
					<el-form-item label="创建时间" :label-width="formLabelWidth">
					  <el-input  autocomplete="off" disabled v-model="showForm.creationDate"></el-input>
					</el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="showFormVisible = false">取 消</el-button>
			  </div>
			</el-dialog>
			
		</div>
	</body>
	<script type="application/javascript">
		new Vue({
			el: '#div',
			data: {
				//查询
				searchFrom: {
					userCode:"",
					userName:""
				},
				
				//列表数据
				tableData: [
				],
				
				//分页
				pagination: {
					currentPage: 1,
					pageSize: 3,
					total: 0
				},
				
				//查看
				showFormVisible: false,
				showForm: {
					 gender: 1
				},
				formLabelWidth: '120px', //设置对话框输入框的宽度
				
			},
			methods: {
				doSearch() {
					//每次点击查询时需要从第一页开始查询,将当前页码设置为第一页
					this.pagination.currentPage = 1;
					//调用查询方法doList
					this.doList();
				},
				handleShow(index, row) {
					this.showFormVisible = true;
					console.log(index, row);
					console.log(row);
					console.log("row.gender = " + row.gender);

					//this.showForm = row;  //引用数据类型赋值的是地址,此处status的值发生变化会影响下面的status处理的结果,所以不能直接赋值对象
					this.showForm.userCode = row.userCode;
					this.showForm.userName = row.userName;
					this.showForm.birthday = row.birthday;
					this.showForm.phone = row.phone;
					this.showForm.address = row.address;
					this.showForm.roleName = row.role ? row.role.roleName : ''; // 从role对象获取角色名称
					this.showForm.creationDate = row.creationDate;
					//处理显示数据
					this.showForm.gender = row.gender == 1 ? "男":"女";
					this.showForm.status = row.status == 1 ? "正常":"冻结";
				},
				handleSizeChange(val) {
					console.log(`每页 ${val} 条`);
					//更新每页大小
					this.pagination.pageSize = val;
					//发送请求
					this.doList();
				},
				handleCurrentChange(val) {
					console.log(`当前页: ${val}`);
					//更新当前页码
					this.pagination.currentPage = val;
					//发送请求
					this.doList();
				},
				doList(){
					console.log("开始请求用户列表数据...");
					console.log("请求参数:", {
						userName: this.searchFrom.userName,
						userCode: this.searchFrom.userCode,
						currentPage: this.pagination.currentPage,
						pageSize: this.pagination.pageSize
					});
					
					axios({
						method: 'get',
						url: server_url + "/user/search",
						params: {
							userName: this.searchFrom.userName,
							userCode: this.searchFrom.userCode,
							currentPage: this.pagination.currentPage,
							pageSize: this.pagination.pageSize
						},
						withCredentials: true // 确保发送cookie，解决可能的认证问题
					}).then(resp => {
						console.log("用户列表响应数据:", resp.data);
						
						// 处理服务端响应的结果
						if(resp.data.flag){
							this.tableData = resp.data.data;
							console.log("获取到的用户列表数据:", this.tableData);
							
							if (!this.tableData || this.tableData.length === 0) {
								console.warn("用户列表数据为空");
							}
							
							//赋值分页
							this.pagination.currentPage = resp.data.currentPage;
							this.pagination.pageSize = resp.data.pageSize;
							this.pagination.total = resp.data.total;
						} else {
							this.$message.error(resp.data.message || "获取用户列表失败");
							console.error("获取用户列表失败:", resp.data.message);
						}
					}).catch(err => {
						console.error("获取用户列表请求错误:", err);
						this.$message.error("获取用户列表失败，请检查网络连接");
					});
				},
				doUpdateStatus(id,status){ //更新用户状态
					this.$confirm('确认更改用户状态?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(resp=>{
						console.log("id = " + id);
						console.log("status = " + status);
						axios.post(
								server_url + "/user/updateStatus",
								null,
								{
									params: {
										id: id,
										status: status
									}
								}
						).then(resp=>{
							if(resp.data.flag){
								//提示成功消息
								this.$message({
									message: resp.data.message,
									type: 'success'
								});
								//重新请求最新列表数据
								this.doList();
							}else{
								this.$message.error(resp.data.message);
							}
						}).catch(err=>{

						})
					})


				},
				formatterStatus(row, column){
					console.log("row.status = " + row.status);
					var statusStr = "";
					switch (row.status) {
						case 1:
							statusStr = "正常";
							break;
						case 2:
							statusStr = "冻结";
					}
					return statusStr;
				}
			
			},
			mounted: function() {
				//页面加载时调用函数
				this.doList();
			}
		});
	</script>
</html>